<template>
     <div class="all">
        <div class="head">
            <div class="title">
                <h1>玲珑知识库</h1>
            </div>
            <div class="login">
                <div class="welcome">欢迎来到知识库</div>
                <img src="./avatar.jpg" alt="Avatar" class="avatar">
                <div class="loginInfo">未登录</div>
            </div>
        </div>
        <div class="sidebar">
            <div class="top">
                <div class="tab active">知识检索</div>
                <div class="tab">知识问答</div>
                <div class="tab">历史记录</div>
                <div class="tab">文档&知识库</div>
            </div>
            <div class="footer">
                <button class="backToHome">回到首页</button>
            </div>
        </div>
        
        <div class="main">
            <div class="main-title">
                <span class="default">玲珑AI</span>
                <span class="highlight">问答</span>
            </div>
            <form class="layui-form" action="">
                <div class="outline">
                    <div class="question">
                        <div class="question-content">
                            <textarea name="" id="" rows="4" cols="85" placeholder="请输入"></textarea>
                        </div>
                        <div class="bottom clearfix">
                            <input type="checkbox" name="open" lay-skin="switch" lay-filter="switchTest" title="ON|OFF">
                            <div class="question-networking">联网搜索</div>
                            <div class="question-submit">
                                <button id="submit" style="display:none">提交</button>
                                <label for="submit">
                                    <i class="layui-icon layui-icon-release" style="font-size: 25px; color: #c3c3c3;"></i>
                                </label>
                            </div>
                            <div class="question-image">
                                <input type="file" name="" id="file" style="display:none">
                                <label for="file">
                                    <i class="layui-icon layui-icon-upload-circle" style="font-size: 25px; color: #c3c3c3;"></i>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="switch-tab">
                <button class="switch-button active">问答</button>
                <button class="switch-button">搜索</button>
            </div>

            <div class="search-label">
                <span>黑神话悟空为什么会火爆出圈</span> <span>如何看待最近的A股股市行情</span>
            </div>
        </div>
    </div>
</template>
  
<script>
</script>

<style scoped>

*{
    box-sizing: border-box;
}

.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}

.all {
    width: 100vw;
    height: 100vh;
    background-color: #e4ebff;
    position: relative;
}

.title h1{
    font-weight: bold;
    font-size: large;
}

.head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 8%;
    padding: 0 20px 0 20px;
}

.login{
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    align-items: center;
    color: #bcc0d8;
    width: 180px;
}

.loginInfo{
    color: black;
}

.avatar{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.sidebar{
    position: absolute;
    left: 0;
    width: 232px;
    padding-top: 30px;
    min-width: 200px;
    box-sizing: border-box;
    height: 92%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.sidebar .active{
    color: #fff;
    background-color: #1c60e8;
}

.tab{
    width: 150px;
    height: 35px;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    text-align: center;
    line-height: 36px;
    font-size: 14px;
    color:#bcc0d8;
    margin: 10px auto;
}

.footer{
    display: flex;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}

.backToHome{
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
    color: #c1c3d2;
    height: 35px;
    width: 150px;
    border: 1px solid #c1c3d2;
    background-color: transparent;
}

.main{
    box-sizing: border-box;
    border-top-left-radius: 15px;
    position: fixed;
    left: 232px;
    top: 8%;
    width: 1680px;
    height: 92%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-width: 920px;
}

.main-title{
    font-size: 0;
    font-weight: bold;
    margin-bottom: 30px;
}

.default{
    font-size: 25px;
}

.highlight{
    font-size: 25px;
    color: #1c60e8;
}

.outline{
    border: 2px solid #e0e3eb;
    padding: 8px 8px 4px 8px;
    border-radius: 20px;
    margin-bottom: 25px;
}

.question-content textarea{
    font-size: 14px;
    border:none;
	outline: none;
	resize: none;
}

.question-networking{
    color: black;
    float: left;
}

.bottom{
    color: #c3c3c3;
    font-size: 12px;
    height: 30px;
    line-height: 25px;
}

.layui-form-switch{
    margin: 0;
    margin-right: 5px;
    float: left;
}

.question-submit{
    float: right;
}

.question-image{
    float: right;
    margin-right: 5px;
}

.file-upload{
    width: 25px;
    height: 25px;
}

.submit{
    width: 22px;
    height: 22px;
}

.switch-tab{
    margin-bottom: 25px;
    font-size: 0;
}

.switch-button{
    font-size: 15px;
    border-radius: 8px;
    background-color: #fff;
    width: 65px;
    padding: 5px;
    border: 1px solid #f2f2f2;
}

.active{
    background-color: #1c60e8;
    color: #fff;
}

.search-label span{
    font-size: 12px;
    border-radius: 10px;
    padding: 7px 6px 7px 6px;
    border: 1px solid #e0e3eb;
}
</style>
  